<nz-table
  nzShowPagination
  nzTableLayout="fixed"
  [nzSize]="tableSize"
  [nzTotal]="tableConfig!.total"
  [nzPageIndex]="tableConfig.pageIndex"
  [nzScroll]="tableConfig.needNoScroll?{}:{ x: '1100px' }"
  [nzPageSize]="tableConfig.pageSize"
  (nzQueryParams)="onQueryParamsChange($event)"
  [nzLoading]="tableConfig.loading"
  (nzPageSizeChange)="onPageSizeChange($event)"
  [nzFrontPagination]="false"
  [nzData]="_dataList"
  [nzOuterBordered]="true"
  nzShowSizeChanger
  nzShowQuickJumper
  [nzBordered]="true"
  [nzShowTotal]="rangeTemplate"
>
  <ng-template #rangeTemplate let-range="range" let-total> {{ range[0] }}-{{ range[1] }} 共 {{ total }} 条</ng-template>
  <thead>
  <tr>
    <th class="animate-bg-0" [nzLeft]="true" [nzIndeterminate]="indeterminate" *ngIf="tableConfig.showCheckbox"
        (nzCheckedChange)="onAllChecked($event)" [nzWidth]="'40px'" [nzChecked]="allChecked"></th>
    <ng-container *ngFor="let head of tableConfig.headers;let headIndex=index;let last=last;let first=first;">
      <th
        class="animate-bg-0"
        [nzWidth]="head.width + 'px'"
        [nzRight]="(!!head.fixed&&head.fixedDir==='right')"
        [nzLeft]="(!!head.fixed&&head.fixedDir==='left')"
        nz-resizable
        nzPreview
        nzBounds="parent"
        (nzResizeEnd)="onResize($event, head.title)"
        [nzMaxWidth]="1200"
        [nzMinWidth]="1"
        *ngIf="(head.show===undefined||head.show===true)"
      >
        <nz-resize-handle *ngIf="!last&&(tableConfig.showCheckbox?true:!last)" nzDirection="right">
          <div class="resize-trigger"></div>
        </nz-resize-handle>
        {{head.title}}
        <div class="sort-wrap m-l-8 hand-model" (click)="changeSort(head)" *ngIf="head.showSort">
          <i class="sort-caret ascending" [class.sort-caret-sel-asc]="head.sortDir==='asc'"></i>
          <i class="sort-caret descending" [class.sort-caret-sel-desc]="head.sortDir==='desc'"></i>
        </div>
      </th>
    </ng-container>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of _dataList">
    <ng-container *ngFor="let item of mapOfExpandedData[data.id];let rowIndex=index">
      <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
        <td class="animate-bg-0"
            [nzIndeterminate]="item['indeterminate']"
            nzEllipsis *ngIf="tableConfig.showCheckbox" [nzLeft]="true"
            (nzCheckedChange)="checkRowSingle($event,rowIndex,item)"
            [nzChecked]="item['_checked']"></td>
        <ng-container *ngFor="let head of tableConfig.headers;let headIndex=index;let last=last;let first=first;">
          <td
            *ngIf="(head.show===undefined||head.show===true)"
            [nzLeft]="(!!head.fixed&&head.fixedDir==='left')"
              [nzRight]="(!!head.fixed&&head.fixedDir==='right')"
              [nzIndentSize]="first?item.level! * 20:0"
              [ngClass]="head.tdClassList?head.tdClassList:''"
              [nzEllipsis]="!head.notNeedEllipsis"
              [nzShowExpand]="first?!!item.children:false"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.id], item, $event)"
          >

            <ng-container *ngIf="head.tdTemplate;else rowTpl">
              <ng-container *ngTemplateOutlet="head.tdTemplate;context:item"></ng-container>
            </ng-container>
            <ng-template #rowTpl>
              <ng-container *ngIf="head.pipe;else noPipe">
                <span
                  [title]="(item|tableFiledPipe:head.field|map:head.pipe)">{{item|tableFiledPipe:head.field|map:head.pipe}}</span>
              </ng-container>
              <ng-template #noPipe>
                <ng-container><span [title]="item|tableFiledPipe:head.field">{{item|tableFiledPipe:head.field}}</span>
                </ng-container>
              </ng-template>
            </ng-template>
          </td>
        </ng-container>
      </tr>
    </ng-container>
  </ng-container>
  </tbody>
</nz-table>
